<template>
    <div class="researchExamineList">
        <div class="header">
            <van-nav-bar :title="title" left-arrow @click-left="router.back()" />
        </div>
        <SearchHome v-model:value="searchValue" placeholder="请输入商品名称" clearabl @onSubmit="onSearch" :isFiltrate="false"/>
        <DownArrowScreen v-model:value="queryParams" @onSubmit="onRefresh" :title="title" />
        <div class="product_selection_list">
            <van-pull-refresh style="height: 100%;" v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                    <template v-slot:finished>
                        <div class="nothing_div" v-if="list.length == 0">
                            <van-image :src="nothingData"></van-image>
                            <div class="nothing_font">暂无数据</div>
                        </div>
                    </template>
                    <div class="product_list_van_list">
                        <ListItems v-for="item in list" :key="item.id" :row="item" :status="queryParams.status"
                            @click="handleGetDetails(item)" :title="title" />
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted, onActivated } from "vue";
import { useRouter, useRoute } from "vue-router";
import DownArrowScreen from './components/downArrowScreen.vue'
import SearchHome from '@/views/productHome/productLists/components/searchHome/index.vue'
import nothingData from '@/assets/porduct/icon_zanwushuju.png'
import { getFirstLogInventPe, getSecondLogInventPe, getThirdLogInventPe, getPriceFirstListInventPe, getPriceSecondListInventPe, getContractFirstListInventPe, getStockListInventPe, getStockPriceInventPe } from '@/api/productList/index'
import ListItems from './components/listItems.vue'
const router = useRouter();
const route = useRoute();
/** 列表title */
const title: any = computed(() => {
    return route.query.title;
});
// 检索
const searchValue = ref("");
// 搜索条件
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    styleName: '', // 商品名称
    status: '', // 审批状态
    recruiterDeptId: '', // 研发部门id
    startTime: '', // 提交日期
});
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref<any[]>([]);
// 限制连续刷新数据重复问题
const refreFlag = ref(true)

const vantListScrollTop = ref<any>(0) // 列表滚动高度

/** 根据商品名称搜索 */
const onSearch = () => {
    queryParams.value.styleName = searchValue.value
    onRefresh()
}
/** 下拉 */
const onRefresh = () => {
    if (refreFlag.value) {
        refreFlag.value = false
        finished.value = false; // 清空列表数据
        refreshing.value = false;
        loading.value = true; // 加载状态
        queryParams.value.pageNum = 1; // 分页数赋值为1
        list.value = []; // 清空数组
        onLoad(); // 重新加载数据
    } else {
        finished.value = false;
        refreshing.value = false;
    }
}
/** 加载更多 */
const onLoad = async () => {
    getList();
    queryParams.value.pageNum++;
};
/** 查询商品列表 */
const getList = async () => {
    var res: any;
    if (title.value == '组长审批') {
        res = await getFirstLogInventPe(queryParams.value);
    } else if (title.value == '总监初审') {
        res = await getSecondLogInventPe(queryParams.value);
    } else if (title.value == '总监审批') {
        res = await getThirdLogInventPe(queryParams.value);
    } else if (title.value == '核价初审') {
        res = await getPriceFirstListInventPe(queryParams.value);
    } else if (title.value == '核价复审') {
        res = await getPriceSecondListInventPe(queryParams.value);
    } else if (title.value == '无合同入库') {
        res = await getContractFirstListInventPe(queryParams.value);
    } else if (title.value == '入库审批') {
        res = await getStockListInventPe(queryParams.value);
    } else if (title.value == '变价审批') {
        res = await getStockPriceInventPe(queryParams.value);
    }
    setTimeout(() => {
        refreFlag.value = true
        // 空数据 停止加载
        if (res.rows.length == 0) {
            list.value = [];
            finished.value = true;
            loading.value = false;
            return;
        }
        // 有数据 赋值列表 加载状态结束
        res.rows.forEach((item) => {
            finished.value = false;
            list.value.push(item);
        });
        loading.value = false;
        refreshing.value = false;
        // 如果list长度大于等于总数据条数，数据全部加载完成
        if (list.value.length >= res.total) {
            finished.value = true; //结束加载
        }
    }, 400);
};
/** 跳转详情 */
const handleGetDetails = (row: any) => {
    router.push({
        path: '/researchApprovalDetails',
        query: {
            id: row.id,
            title: title.value,
        }
    })
}
onMounted(() => {
    functionScroll('init')
})
onUnmounted(() => {
    functionScroll('delete')
});
// 缓存组件中保存页面浏览位置方法
const functionScroll = (type: string) => {
    const dom: any = document.querySelector('.van-pull-refresh')
    if (type === 'init') {
        dom?.addEventListener('scroll', (e: any) => {
            vantListScrollTop.value = e.target.scrollTop
        })
    } else if (type === 'delete') {
        dom?.removeEventListener('scroll', () => { });
    } else if (type === 'black') {
        dom.scrollTop = vantListScrollTop.value
    }
}
onActivated(() => {
    functionScroll('black')
})
</script>
<script lang="ts">
export default { name: 'researchExamineList' }
</script>
<style lang="less" scoped>
.researchExamineList {
    width: 100%;
    height: 100vh;
    background-color: #f6faff;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 100%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        z-index: 6003;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .product_selection_list {
        flex: 1;
        min-height: 0;
    }

    :deep(.van-pull-refresh) {
        overflow: scroll;
    }
}
</style>